<template>
    <div style="width: 50%;margin: auto;">
        <van-cell icon="arrow-left" @click="back" style="background-color: #0086b3;align-content:center;">
            <font color="#f0ffff">修改密码</font>
        </van-cell>
        <van-form :model="ruleForm"><br>
            <van-field v-model="ruleForm.pass" style="width: 80%;margin: auto" label="原始密码" :rules="[{required:true,message:'请输入原始密码'}]" /><br><br>
            <van-field v-model="ruleForm.password" style="width: 80%;margin: auto" label="新密码" :rules="[{required:true,message:'请输入新密码'}]" /><br>
            <div style="margin-top: 10%">
                <van-button color="#0086b3" style="width: 40%;margin: auto" native-type="submit" @click="updateUser()" block>确定</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    export default {
        name: 'Add1',
        data () {
            return {
                ruleForm: [{
                    id:sessionStorage.getItem("id"),
                    pass: '',
                    password: '',
                    p1:sessionStorage.getItem("password")
                }
                ]
            }
        },
        methods: {
            back () {
                this.$router.go(-1)
            },
            async updateUser () {
                var qs=require("querystring");
                const self = this;

                this.ruleForm.p1 = sessionStorage.getItem('password');
                if (this.ruleForm.pass !== this.ruleForm.p1) {
                        alert("原始密码错误！！！")
                    }else{
                    this.ruleForm.id = sessionStorage.getItem('id');
                    const { data: res } = await this.$axios.post('/updateUser',qs.stringify(self.ruleForm))
                    if (res != null) {
                        alert('修改成功    请重新登录')
                        this.$router.push('/')
                    } else {
                        alert('有错误')
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>
